<template>
  <div class="list">
    <div class="el-page-header">
      <div class="el-page-header__left" @click="$router.go(-1)">
        <i class="el-icon-back"></i>
        <div class="el-page-header__title">返回</div>
      </div>
      <div class="el-page-header__content">{{$route.meta.title}}</div>
    </div>
    <div class="h2 line">批次信息</div>
    <div class="section">
      <el-table :data="[tradeBatch]" style="width: 100%">
        <el-table-column align="center" prop="company_title" label="支付企业"></el-table-column>
        <el-table-column align="center" prop="batch_number" label="批次号"></el-table-column>
        <el-table-column align="center" prop="pay_status" label="支付状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status === -1" size="small" type="warning">打款失败</el-tag>
            <el-tag v-else-if="scope.row.pay_status === 1" size="small" type="">等待打款</el-tag>
            <el-tag v-else-if="scope.row.pay_status === 2"  size="small" type="info">打款中</el-tag>
            <el-tag v-else-if="scope.row.pay_status === 3" size="small" type="warning">部分打款</el-tag>
            <el-tag v-else-if="scope.row.pay_status === 9" type="success">打款成功</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_money" label="支付总额">
          <template slot-scope="scope">
            <span>{{scope.row.pay_money|numFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="money_service" label="服务费总额">
          <template slot-scope="scope">
            <span>{{scope.row.pay_money - scope.row.settle_money|numFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="settle_money" label="实付总额">
          <template slot-scope="scope">
            <span>{{scope.row.settle_money|numFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_error_msg" label="错误信息">
          <template slot-scope="scope">
            <span v-if="scope.row" :class="scope.row.status_pay === '打款失败' ? 'error' : ''">{{scope.row.pay_error_msg}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="h2 line">付款明细</div>
    <div class="section">
      <el-table :data="tableData" v-loading="isLoading" @cell-click="clickHandle" style="width: 100%">
              <el-table-column align="center" prop="id" width="80px" sortable="custom" label="ID">
              </el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="pay_type" label="账号类型"></el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="pay_name" label="收款方账户姓名"></el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="pay_amount" label="收款方客户账号"></el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="status_pay" label="付款状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.pay_status === -1" size="small" type="warning">打款失败</el-tag>
                  <el-tag v-else-if="scope.row.pay_status === 1" size="small" type="">等待打款</el-tag>
                  <el-tag v-else-if="scope.row.pay_status === 2"  size="small" type="info">打款中</el-tag>
                  <el-tag v-else-if="scope.row.pay_status === 3" size="small" type="warning">部分打款</el-tag>
                  <el-tag v-else-if="scope.row.pay_status === 9" type="success">打款成功</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="pay_remark" label="付款备注"></el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="pay_money" label="支付总额">
                <template slot-scope="scope">
                  <span>{{scope.row.pay_money|numFilter}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="settle_money" label="实付总额">
                <template slot-scope="scope">
                  <span>{{scope.row.settle_money|numFilter}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="pay_time" label="付款时间">
                <template slot-scope="scope">
                  <span>{{scope.row.pay_time ? scope.row.pay_time :  '--'}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" show-overflow-tooltip prop="error_msg" label="错误信息">
                <template slot-scope="scope">
                  <span v-if="scope.row" :class="scope.row.pay_status === -1 ? 'error' : ''">{{scope.row.error_msg}}</span>
                </template>
              </el-table-column>
            </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      isLoading: false,
      tradeBatch: {
        batch_id: '',
        batch_number: '',
        company_title: '',
        created_at: '',
        pay_money: '',
        settle_money: '',
        type: 0,
        rate: 0,
        pay_status: 0
      },
      tableData: [],
      batch_info: [],
    };
  },
  filters: {
    // 截取当前数据到小数点后两位
    numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);
      return realVal;
    }
  },
  methods: {
    fetchData() {
      this.$http.get(`/company/payment/info/${this.$route.query.id}`).then(res => {
        if (res.code === 0) {
            let _data = res.data
            this.tradeBatch.id = _data.id
            this.tradeBatch.company_title = _data.company_info.title
            this.tradeBatch.batch_number = _data.batch_number
            this.tradeBatch.pay_status = _data.pay_status
            this.tradeBatch.pay_money = _data.pay_money
            this.tradeBatch.settle_money = _data.settle_money

            this.tableData = _data.trade_record
        }
      })
    }
  },
  created() {
    this.fetchData()
  }
};
</script>
<style lang="less" scoped>
/deep/ .error {
  color: #f56c6c;
}
</style>
